<!-- vue为模板快捷键 -->
<template>
  <div class="testviewa">
    <!-- <div class="longcomments" v-html="longdata"></div>
    <div class="shortcomments" v-html="shortdata"></div> -->
    <van-switch v-model="checked" />
    <!-- <div :class="[theme==1?'body-theme-light':'body-theme-dark']" v-if="modeswitching" @click="change">夜间模式</div> -->
    <div :class="dark" @click="modeswitching">{{type == "theme-dark" ? "夜间":"日间"}}}</div>
    <!-- <div :class="dark" v-if="modeswitching">夜间模式</div>
    <div :class="sun" v-else >日间模式</div> -->
    <div class="comments_content">
      <div v-html="commentsdata.body" class="comments_text"></div>
      <div class="img_box">
        <!-- <van-image :src="commentsdata.image" class="vanimage"></van-image> -->
        <!-- <div class="title" v-text="titledata"></div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            change:'',
            // longdata:[],
            // shortdata:[],
            commentsdata:[0],
            checked: true,
            // modeswitching:true,
            flag: true,
            type: "theme-dark",
        }
    },
    modeswitching(){
        if(localStorage.getItem('change')){
            localStorage.removeItem('change')
            this.flag = false
        }else{
            localStorage.setItem('change','dark')
            this.flag = true
        }
    },
    created () {
        this.axios.get("https://apis.netstart.cn/zhihudaily/story/9741200/short-comments").then(res =>{ 
            console.log("testa",res);
            console.log(111);
            // this.longdata = res
            // this.shortdata =  res.request;
        });
        this.axios.get("https://apis.netstart.cn/zhihudaily/story/"+this.id+"/short-comments").then(res =>{
            this.commentsdata = res.data;
            console.log(this.commentsdata);
        })
    }
}
</script>

<style lang="less" scoped>
.testviewa{
    width: 100vw;
    height: 80rem;
    .dark{
        color: rgb(241, 232, 232);
        background-color: #333;
    }
    .theme-dark{
        position: absolute;
  bottom: 50px;
  left: 70px;
  width: 50px;
  height: 50px;
  // background: url("../assets/yueduye-yejianmoshi.png") no-repeat center;
  background-size: 70%;
  line-height: 120px;
    }
    .theme-sun {
  position: absolute;
  bottom: 50px;
  left: 70px;
  width: 50px;
  height: 50px;
  // background: url("../assets/rijianmoshixhdpi.png") no-repeat center;
  background-size: 70%;
  line-height: 120px;
}
}
</style>